<template>
    <div class="login">
        <el-form>
            <el-form-item>
                <el-input v-model="userInfo.account" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="userInfo.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { userLogin } from '../api/userLogin';
import { useRouter } from 'vue-router';

const router = useRouter();

const userInfo = reactive({
    account: '',
    password: ''
})
const onSubmit = async () => {
    let res = await userLogin(userInfo);
    try {
        if (res.code === 0) {
            router.push('/home')
            localStorage.setItem('userInfo', JSON.stringify(res));
            localStorage.setItem('token', res.token);
            console.log(res);
        }
    } catch (err) { console.log(err); }

}

</script>

<style lang="scss" scoped>
.login {
    margin-top: 20%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>